// 封装axios//filter.js
import store from '@/store';

// 1. axios.create 创建一个实例  (baseURL / timeout / 大数处理)
// 2. 请求拦截器 ( token request headers )
// 3. 响应拦截器 ( 1.token失效 401  2.当后端不以200作为接口状态标识 手动处理)
import axios from 'axios'
// import store from '@/store'
const instance = axios.create({
  baseURL: '/api/',
  timeout: 10000,
  withCredentials: true,//是否支持跨域
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // config 注入token
    // 1. 从vuex中拿到token
    // 2. 放到request header
    const token = store.state.user.token
    if (token) {
    // config.headers.Authorization = `Bearer ${token}`
    config.headers.token = token
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log('请求错误')
    return Promise.reject(error)
  }
)

// http code 200 - 300 只要接口的状态在200 - 300之间 不管当前接口是成功还是失败 都走第一个回调
// http code 不在200 - 300 之间 会走第二个回调
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

// 需求:
// 封装一个函数 在函数中自动适配get和post请求的参数位置
// 传递参数的格式必须是一个对象
// 使用request进行接口调用  request('url','get', data).then(res=>{})
// get / Get / GET -> GET

function request(url, method, data, headers) {
  // 俩个事儿  1 instance方法执行  2.把执行结果return
  return instance({
    url,
    method,
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: data,
    headers
  })
}
// function mockjsapi (url, method, data) {
//   return mockjs({
//     url,
//     method,
//     data
//   })
// }

export { request }

// 补充：
// 1. 如果遇到同一个项目里 需要配置多套axios实例
// 解决办法需要几个 就通过axios.create创建几个实例

// 2. 拦截器都是支持多个串联使用的 前一个拦截器处理之后的结果会交给下一个拦截器继续处理

// 3. instance = axios + 额外的配置 = 定制化之后的axios
